<template>
  <div>
    <h1>playground - $set</h1>
    {{ student }}
    <button @click="student.sex = '女'">改原本的属性</button>
    <button @click="addAge">加个年龄</button>
  </div>
</template>

<script>

export default {
  name: 'Playground',
  data() {
    return {
      student: {
        name: '张三',
        sex: '男'
      }
    }
  },
  methods: {
    addAge() {
      // 直接添加属性 并不是响应式的，需要用到$set
      // this.student.age = 10
      this.$set(this.student, 'age', 10)
    }

  }
}
</script>
<style scoped>

</style>
